
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-alarm"></use>
                    </svg>
                    <div class="name">alarm</div>
                    <div class="fontclass">#icon-alarm</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowdown"></use>
                    </svg>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">#icon-arrowdown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowdowncircle"></use>
                    </svg>
                    <div class="name">arrow-down-circle</div>
                    <div class="fontclass">#icon-arrowdowncircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowleft"></use>
                    </svg>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">#icon-arrowleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowleftcircle"></use>
                    </svg>
                    <div class="name">arrow-left-circle</div>
                    <div class="fontclass">#icon-arrowleftcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowright"></use>
                    </svg>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">#icon-arrowright</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowrightcircle"></use>
                    </svg>
                    <div class="name">arrow-right-circle</div>
                    <div class="fontclass">#icon-arrowrightcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowup"></use>
                    </svg>
                    <div class="name">arrow-up</div>
                    <div class="fontclass">#icon-arrowup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowupcircle"></use>
                    </svg>
                    <div class="name">arrow-up-circle</div>
                    <div class="fontclass">#icon-arrowupcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bicycle"></use>
                    </svg>
                    <div class="name">bicycle</div>
                    <div class="fontclass">#icon-bicycle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-book"></use>
                    </svg>
                    <div class="name">book</div>
                    <div class="fontclass">#icon-book</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bookmark"></use>
                    </svg>
                    <div class="name">bookmark</div>
                    <div class="fontclass">#icon-bookmark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-briefcase"></use>
                    </svg>
                    <div class="name">briefcase</div>
                    <div class="fontclass">#icon-briefcase</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bubble"></use>
                    </svg>
                    <div class="name">bubble</div>
                    <div class="fontclass">#icon-bubble</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bus"></use>
                    </svg>
                    <div class="name">bus</div>
                    <div class="fontclass">#icon-bus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-calendarfull"></use>
                    </svg>
                    <div class="name">calendar-full</div>
                    <div class="fontclass">#icon-calendarfull</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">camera</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cameravideo"></use>
                    </svg>
                    <div class="name">camera-video</div>
                    <div class="fontclass">#icon-cameravideo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-car"></use>
                    </svg>
                    <div class="name">car</div>
                    <div class="fontclass">#icon-car</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cart"></use>
                    </svg>
                    <div class="name">cart</div>
                    <div class="fontclass">#icon-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chartbars"></use>
                    </svg>
                    <div class="name">chart-bars</div>
                    <div class="fontclass">#icon-chartbars</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkmarkcircle"></use>
                    </svg>
                    <div class="name">checkmark-circle</div>
                    <div class="fontclass">#icon-checkmarkcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevrondown"></use>
                    </svg>
                    <div class="name">chevron-down</div>
                    <div class="fontclass">#icon-chevrondown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevrondowncircle"></use>
                    </svg>
                    <div class="name">chevron-down-circle</div>
                    <div class="fontclass">#icon-chevrondowncircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronleft"></use>
                    </svg>
                    <div class="name">chevron-left</div>
                    <div class="fontclass">#icon-chevronleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronleftcircle"></use>
                    </svg>
                    <div class="name">chevron-left-circle</div>
                    <div class="fontclass">#icon-chevronleftcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronright"></use>
                    </svg>
                    <div class="name">chevron-right</div>
                    <div class="fontclass">#icon-chevronright</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronrightcircle"></use>
                    </svg>
                    <div class="name">chevron-right-circle</div>
                    <div class="fontclass">#icon-chevronrightcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronup"></use>
                    </svg>
                    <div class="name">chevron-up</div>
                    <div class="fontclass">#icon-chevronup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevronupcircle"></use>
                    </svg>
                    <div class="name">chevron-up-circle</div>
                    <div class="fontclass">#icon-chevronupcircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-code"></use>
                    </svg>
                    <div class="name">code</div>
                    <div class="fontclass">#icon-code</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cog"></use>
                    </svg>
                    <div class="name">cog</div>
                    <div class="fontclass">#icon-cog</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cross"></use>
                    </svg>
                    <div class="name">cross</div>
                    <div class="fontclass">#icon-cross</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-crosscircle"></use>
                    </svg>
                    <div class="name">cross-circle</div>
                    <div class="fontclass">#icon-crosscircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-download"></use>
                    </svg>
                    <div class="name">download</div>
                    <div class="fontclass">#icon-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-enter"></use>
                    </svg>
                    <div class="name">enter</div>
                    <div class="fontclass">#icon-enter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-envelope"></use>
                    </svg>
                    <div class="name">envelope</div>
                    <div class="fontclass">#icon-envelope</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exitup"></use>
                    </svg>
                    <div class="name">exit-up</div>
                    <div class="fontclass">#icon-exitup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-eye"></use>
                    </svg>
                    <div class="name">eye</div>
                    <div class="fontclass">#icon-eye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fileadd"></use>
                    </svg>
                    <div class="name">file-add</div>
                    <div class="fontclass">#icon-fileadd</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fileempty"></use>
                    </svg>
                    <div class="name">file-empty</div>
                    <div class="fontclass">#icon-fileempty</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-filmplay"></use>
                    </svg>
                    <div class="name">film-play</div>
                    <div class="fontclass">#icon-filmplay</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flag"></use>
                    </svg>
                    <div class="name">flag</div>
                    <div class="fontclass">#icon-flag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-heart"></use>
                    </svg>
                    <div class="name">heart</div>
                    <div class="fontclass">#icon-heart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hourglass"></use>
                    </svg>
                    <div class="name">hourglass</div>
                    <div class="fontclass">#icon-hourglass</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-menu"></use>
                    </svg>
                    <div class="name">menu</div>
                    <div class="fontclass">#icon-menu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-indentincrease"></use>
                    </svg>
                    <div class="name">indent-increase</div>
                    <div class="fontclass">#icon-indentincrease</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-italic"></use>
                    </svg>
                    <div class="name">italic</div>
                    <div class="fontclass">#icon-italic</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-keyboard"></use>
                    </svg>
                    <div class="name">keyboard</div>
                    <div class="fontclass">#icon-keyboard</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laptop"></use>
                    </svg>
                    <div class="name">laptop</div>
                    <div class="fontclass">#icon-laptop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laptopphone"></use>
                    </svg>
                    <div class="name">laptop-phone</div>
                    <div class="fontclass">#icon-laptopphone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-license"></use>
                    </svg>
                    <div class="name">license</div>
                    <div class="fontclass">#icon-license</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-linespacing"></use>
                    </svg>
                    <div class="name">line-spacing</div>
                    <div class="fontclass">#icon-linespacing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-link"></use>
                    </svg>
                    <div class="name">link</div>
                    <div class="fontclass">#icon-link</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-list"></use>
                    </svg>
                    <div class="name">list</div>
                    <div class="fontclass">#icon-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-location"></use>
                    </svg>
                    <div class="name">location</div>
                    <div class="fontclass">#icon-location</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock"></use>
                    </svg>
                    <div class="name">lock</div>
                    <div class="fontclass">#icon-lock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-magicwand"></use>
                    </svg>
                    <div class="name">magic-wand</div>
                    <div class="fontclass">#icon-magicwand</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-magnifier"></use>
                    </svg>
                    <div class="name">magnifier</div>
                    <div class="fontclass">#icon-magnifier</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-map"></use>
                    </svg>
                    <div class="name">map</div>
                    <div class="fontclass">#icon-map</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mapmarker"></use>
                    </svg>
                    <div class="name">map-marker</div>
                    <div class="fontclass">#icon-mapmarker</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mic"></use>
                    </svg>
                    <div class="name">mic</div>
                    <div class="fontclass">#icon-mic</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moon"></use>
                    </svg>
                    <div class="name">moon</div>
                    <div class="fontclass">#icon-moon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-musicnote"></use>
                    </svg>
                    <div class="name">music-note</div>
                    <div class="fontclass">#icon-musicnote</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neutral"></use>
                    </svg>
                    <div class="name">neutral</div>
                    <div class="fontclass">#icon-neutral</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paperclip"></use>
                    </svg>
                    <div class="name">paperclip</div>
                    <div class="fontclass">#icon-paperclip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paw"></use>
                    </svg>
                    <div class="name">paw</div>
                    <div class="fontclass">#icon-paw</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pencil"></use>
                    </svg>
                    <div class="name">pencil</div>
                    <div class="fontclass">#icon-pencil</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone"></use>
                    </svg>
                    <div class="name">phone</div>
                    <div class="fontclass">#icon-phone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phonehandset"></use>
                    </svg>
                    <div class="name">phone-handset</div>
                    <div class="fontclass">#icon-phonehandset</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-picture"></use>
                    </svg>
                    <div class="name">picture</div>
                    <div class="fontclass">#icon-picture</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-piechart"></use>
                    </svg>
                    <div class="name">pie-chart</div>
                    <div class="fontclass">#icon-piechart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pluscircle"></use>
                    </svg>
                    <div class="name">plus-circle</div>
                    <div class="fontclass">#icon-pluscircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-powerswitch"></use>
                    </svg>
                    <div class="name">power-switch</div>
                    <div class="fontclass">#icon-powerswitch</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-printer"></use>
                    </svg>
                    <div class="name">printer</div>
                    <div class="fontclass">#icon-printer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pushpin"></use>
                    </svg>
                    <div class="name">pushpin</div>
                    <div class="fontclass">#icon-pushpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-questioncircle"></use>
                    </svg>
                    <div class="name">question-circle</div>
                    <div class="fontclass">#icon-questioncircle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-redo"></use>
                    </svg>
                    <div class="name">redo</div>
                    <div class="fontclass">#icon-redo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rocket"></use>
                    </svg>
                    <div class="name">rocket</div>
                    <div class="fontclass">#icon-rocket</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sad"></use>
                    </svg>
                    <div class="name">sad</div>
                    <div class="fontclass">#icon-sad</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-screen"></use>
                    </svg>
                    <div class="name">screen</div>
                    <div class="fontclass">#icon-screen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-smartphone"></use>
                    </svg>
                    <div class="name">smartphone</div>
                    <div class="fontclass">#icon-smartphone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-smile"></use>
                    </svg>
                    <div class="name">smile</div>
                    <div class="fontclass">#icon-smile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star"></use>
                    </svg>
                    <div class="name">star</div>
                    <div class="fontclass">#icon-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-starempty"></use>
                    </svg>
                    <div class="name">star-empty</div>
                    <div class="fontclass">#icon-starempty</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlink"></use>
                    </svg>
                    <div class="name">unlink</div>
                    <div class="fontclass">#icon-unlink</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-store"></use>
                    </svg>
                    <div class="name">store</div>
                    <div class="fontclass">#icon-store</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sun"></use>
                    </svg>
                    <div class="name">sun</div>
                    <div class="fontclass">#icon-sun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sync"></use>
                    </svg>
                    <div class="name">sync</div>
                    <div class="fontclass">#icon-sync</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tablet"></use>
                    </svg>
                    <div class="name">tablet</div>
                    <div class="fontclass">#icon-tablet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag"></use>
                    </svg>
                    <div class="name">tag</div>
                    <div class="fontclass">#icon-tag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thumbsdown"></use>
                    </svg>
                    <div class="name">thumbs-down</div>
                    <div class="fontclass">#icon-thumbsdown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thumbsup"></use>
                    </svg>
                    <div class="name">thumbs-up</div>
                    <div class="fontclass">#icon-thumbsup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trash"></use>
                    </svg>
                    <div class="name">trash</div>
                    <div class="fontclass">#icon-trash</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-undo"></use>
                    </svg>
                    <div class="name">undo</div>
                    <div class="fontclass">#icon-undo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-upload"></use>
                    </svg>
                    <div class="name">upload</div>
                    <div class="fontclass">#icon-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">user</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-volume"></use>
                    </svg>
                    <div class="name">volume</div>
                    <div class="fontclass">#icon-volume</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-volumemedium"></use>
                    </svg>
                    <div class="name">volume-medium</div>
                    <div class="fontclass">#icon-volumemedium</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-warning"></use>
                    </svg>
                    <div class="name">warning</div>
                    <div class="fontclass">#icon-warning</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
